<template>
    <div>
        <!-- <div class="middle-machine" :style="'top:'+top+'px'"> -->
        <div class="middle-machine">
            <span class="title-line" style="margin-top:6px">
                机械监控
            </span>
            <div class="machine-count-flex">
                <el-button v-for="(item,index) in machine" :key="item.title" class="machine-btn" @click="setData(index)" plain>
                    <span>{{ item.title }}：</span>
                    <span class="machine-count">{{ item.num }}</span>
                </el-button>
            </div>
            <div class="machine-count-flex">
                <div class="machine-window" style="position:relative;" v-for="(item,index) in mechanics" :key="item.title" :style="!item.state?'background:#ddd':''" @dblclick="handleEnter(index)">
                    <p>{{ item.resourceName }}</p>
                    <p v-if="item.state">{{ item.jobPersonName }}</p>
                    <p v-if="item.state">未作业:{{ item.noJob }}</p>
                    <p v-if="item.state">位置:{{ item.lastJobPosition }}</p>
                    <div :class="!item.state?'machines-window seconds-window':'machine-window second-window'" v-if="item.over">
                        <p @click="handleClickState(index,'loginState')" v-if="item.state" :style="item.loginState?'background:#9fe3b2':''" :class="item.state?'sanjiao-right':'sanjiaos-right'">机械终端登录状态切换</p>
                        <p @click="handleClickState(index,'valid')" :style="item.state&&item.valid?'background:#9fe3b2':!item.state&&item.valid?'background:#ccc':''" :class="item.state?'sanjiao-right':'sanjiaos-right'">机械可用状态</p>
                        <p @click="handleClickState(index,'command')" v-if="item.state&&item.jobPersonName" :style="item.state&&item.command?'background:#9fe3b2':!item.state&&item.command?'background:#ccc':''" :class="item.state?'sanjiao-right':'sanjiaos-right'">机械作业指令查看</p>
                        <div :class="!item.state?'machines-window thirds-window':'machine-window third-window'" v-if="item.loginState">
                            <p @click="handleLogin" v-if="power('WJOB_CONTROL_CONTAINER_MECHANICS:LOGIN')">登录</p>
                            <p @click="handleLogout(item)" v-if="power('WJOB_CONTROL_CONTAINER_MECHANICS:LOGOUT')">注销</p>
                        </div>
                        <div :style="item.state?'top:20px':'top:0px'" :class="!item.state?'machines-window thirds-window':'machine-window third-window'" v-if="item.valid">
                            <p @click="handleSetState(item,true)" v-if="power('WJOB_CONTROL_CONTAINER_MECHANICS:ENABLE')">可用</p>
                            <p @click="handleSetState(item,false)" v-if="power('WJOB_CONTROL_CONTAINER_MECHANICS:DISABLE')">不可用</p>
                        </div>
                        <div :style="item.state?'top:20px':'top:15px'" style="width:115px" :class="!item.state?'machines-window thirds-window':'machine-window third-window'" v-if="item.command">
                            <p @click="handleWatchDirective(item,true)" v-if="power('WJOB_CONTROL_CONTAINER_MECHANICS:ENABLE')">现机械关联指令</p>
                            <p @click="handleWatchDirective(item,false)" v-if="power('WJOB_CONTROL_CONTAINER_MECHANICS:DISABLE')">目的机械关联指令</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="登录账户选择" :visible.sync="dialogForm" :before-close="handleCancelSelect" width="500px">
            <el-table :data="user" border stripe max-height="500">
                <el-table-column label="选择" width="50">
                    <template slot-scope="scope">
                        <el-radio class="radio" v-model="radio" :label="scope.$index"></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="登录账户"  min-width="120"></el-table-column>
                <el-table-column prop="resourceName" label="账户名称"  min-width="120"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleCancelSelect">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">选 择</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getMechanicsWatch,
    mechanicsWatchEnable,
    mechanicsWatchDisable,
    mechanicsWatchLogin,
    mechanicsWatchLogout
} from "@/api/middleControl/middleControl";
import { getOperatorList } from "@/api/baseResource/baseResource";
export default {
    props: {
        top: {
            type: Number,
            default: 120
        }
    },
    data() {
        return {
            params: "",
            machine: [
                {
                    title: "总机械",
                    num: "10"
                },
                {
                    title: "可用机械",
                    num: "6"
                },
                {
                    title: "不可用机械",
                    num: "4"
                }
            ],
            mechanics: [],
            dialogForm: false,
            user: [],
            radio: "",
            selectIndex: null,
            index: null,
            handleClick: e => {
                this.handleLeave(e);
            }
        };
    },
    mounted() {
        this.loadData();
        document.addEventListener("click", this.handleClick);
    },
    destroyed() {
        console.log("点击事件已卸载");
        document.removeEventListener("click", this.handleClick);
    },
    deactivated(){
        document.removeEventListener("click", this.handleClick);
    },
    methods: {
        // 设置查询条件
        setData(index) {
            this.data = index === 1 ? true : index === 2 ? false : "";
            this.loadData();
        },
        // 获取数据
        loadData() {
            if(!this.power('WJOB_CONTROL_CONTAINER_MECHANICS:QUERY')){
                return
            }
            let params = {
                search_EQ_valid: this.data,
                sortType: "-valid"
            };
            getMechanicsWatch(this.$assist.copySearchConditions(params)).then(
                res => {
                    const data = JSON.parse(JSON.stringify(res.data));
                    this.machine[0].num = data.total;
                    this.machine[1].num = data.usable;
                    this.machine[2].num = data.unusable;
                    this.mechanics = data.mechanics;
                    this.mechanics.map((element, i) => {
                        this.mechanics[i] = {
                            ...element,
                            over: false,
                            valid: false,
                            loginState: false,
                            command: false
                        };
                    });
                }
            );
        },
        // 鼠标进入事件
        handleEnter(index) {
            this.handleClose();
            let params = {
                ...this.mechanics[index],
                over: true
            };
            this.selectIndex = index;
            this.index = index;
            this.mechanics.splice(index, 1, params);
        },
        // 鼠标点击其他区域事件
        handleLeave(event) {
            let e = event.target.parentNode.className;
            console.log(e);
            if(e===''){
                this.handleClose();
            }
            if (e && e.indexOf("machine") == -1) {
                this.handleClose();
            }
        },
        handleClose() {
            let index = this.selectIndex;
            if (index !== null) {
                this.mechanics[index].over = false;
                this.mechanics[index].loginState = false;
                this.mechanics[index].valid = false;
                this.mechanics[index].command = false;
                this.selectIndex = null;
            }
        },
        // 二级窗口选择菜单
        handleClickState(index, type) {
            if (type === "loginState") {
                this.mechanics[index].loginState = true;
                this.mechanics[index].valid = false;
                this.mechanics[index].command = false;
            } else if(type==='valid') {
                this.mechanics[index].valid = true;
                this.mechanics[index].loginState = false;
                this.mechanics[index].command = false;
            }else{
                this.mechanics[index].valid = false;
                this.mechanics[index].loginState = false;
                this.mechanics[index].command = true;
            }
        },
        handleLogin() {
            getOperatorList().then(res => {
                this.user = res.data.aaData;
                this.dialogForm = true;
            });
        },
        // 机械监控-登录
        handleSubmit() {
            console.log(this.selectIndex);
            let id = this.user[this.radio].id;
            if (!id) {
                this.$message({ message: "请选择一个账户!", type: "error" });
                return;
            }
            let data = {
                jobPersonId: id,
                terminalId: this.mechanics[this.index].terminalId
            };
            mechanicsWatchLogin(this.mechanics[this.index].id, data).then(
                res => {
                    this.$message({ message: "登录成功!", type: "success" });
                    this.loadData();
                    this.handleCancelSelect();
                }
            );
        },
        // 登录账户取消选择
        handleCancelSelect() {
            this.radio = "";
            this.dialogForm = false;
        },
        // 机械监控-注销
        handleLogout(item) {
            let data={
                jobPersonId:item.jobPersonId,
            }
            mechanicsWatchLogout(item.id,data).then(res => {
                this.$message({ message: "注销成功!", type: "success" });
                this.loadData();
                this.handleCancelSelect();
            });
        },
        // 切换可用状态
        handleSetState(item, bool) {
            const id = item.id || item.machineId;
            if (bool) {
                mechanicsWatchEnable(id).then(res => {
                    this.$message({ message: "切换成功!", type: "success" });
                    this.loadData();
                });
            }else{
                mechanicsWatchDisable(id).then(res => {
                    this.$message({ message: "切换成功!", type: "success" });
                    this.loadData();
                });
            }
        },
        // 指令查看
        handleWatchDirective(item,bool) {
            const data={
                val:item.resourceName,
                isVal:bool
            }
            this.$emit("watch", data);
            item.over=false
        }
    }
};
</script>
<style scoped>
.machine-count-flex {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.machine-btn {
    margin: 10px 0px 0px 0px;
    width: 130px;
    border: 1px solid #409eff;
}

.machine-count {
    color: red;
    font-size: 16px;
}
.middle-machine {
    width: 150px;
    position: absolute;
}
.machine-window {
    font-size: 14px;
    width: 120px;
    padding: 5px;
    background: #c5f2d1;
    margin-bottom: 10px;
    border-radius: 5px;
}
.machine-window p {
    cursor: pointer;
    font-size: 13px;
    padding: 2px 5px;
    user-select: none;
}
.machines-window {
    font-size: 14px;
    width: 120px;
    padding: 5px;
    background: #dddddd;
    margin-bottom: 10px;
    border-radius: 5px;
}
.machines-window p {
    cursor: pointer;
    font-size: 13px;
    padding: 2px 5px;
    user-select: none;
}
.second-window {
    width: 150px;
    position: absolute;
    left: 120px;
    top: 2px;
    border: 1px solid #ffffff;
    margin: 0;
    border-radius: 0;
    z-index: 88;
    box-shadow: 6px 10px 12px -12px;
    padding: 0;
}
.second-window p:hover {
    background: #9fe3b2;
}
.seconds-window {
    width: 150px;
    position: absolute;
    left: 120px;
    top: 2px;
    border: 1px solid #ffffff;
    margin: 0;
    border-radius: 0;
    z-index: 88;
    box-shadow: 6px 10px 12px -12px;
    padding: 0;
}
.seconds-window p:hover {
    background: #ccc;
}
.third-window {
    width: 60px;
    position: absolute;
    left: 150px;
    top: 2px;
    border: 1px solid #ffffff;
    margin: 0;
    border-radius: 0;
    z-index: 3;
    box-shadow: 6px 10px 12px -12px;
    padding: 0;
    text-align: center;
}
.third-window p:hover {
    background: #9fe3b2;
}
.thirds-window {
    width: 60px;
    position: absolute;
    left: 150px;
    top: 2px;
    border: 1px solid #ffffff;
    margin: 0;
    border-radius: 0;
    z-index: 3;
    box-shadow: 6px 10px 12px -12px;
    padding: 0;
    text-align: center;
}
.thirds-window p:hover {
    background: #cccccc;
}
.window-position {
    top: 20px;
}
.sanjiao-right {
    position: relative;
}
.sanjiao-right::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 0px;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-width: 5px;
    border-style: dashed dashed dashed dashed; /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
    border-color: transparent transparent transparent #599869;
}
.sanjiaos-right {
    position: relative;
}
.sanjiaos-right::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 0px;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-width: 5px;
    border-style: dashed dashed dashed dashed; /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
    border-color: transparent transparent transparent #bbb;
}
</style>

